<template>
  <div>
    <CardThumbnailFiles
      v-if="((fileList && fileList.length) || (errorFileList && errorFileList.length)) && showCardMode"
      :file-percent="filePercent"
      :is-edit="isEdit"
      :error-file-list="errorFileList"
      :file-list="fileList"
      @removeFile="removeFile"
      @reUpload="reUpload"
      @removeError="removeError" />
    <template v-else>
      <div v-if="fileList && fileList.length > 0" class="file-list-title" @click="switchDialog">
        <i class="el-icon-paperclip icon" style="" />文件共{{ fileList.length }}个
      </div>
      <el-dialog
        v-if="fileList && fileList.length > 0"
        :visible.sync="dialogVisible"
        :before-close="switchDialog"
        :show-close="true"
        :append-to-body="true"
        :class="{'fitMobile':showMobilePage}"
        class="file-show-dialog large-common-dialog-size"
      >
        <div :style="{maxHeight: maxHeight}" class="scroll file-show-dialog-container">
          <ImgAndVideo :is-edit="isEdit" :file-list="fileList" @removeFile="removeFile" />
        </div>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import ImgAndVideo from './imgAndVideo';
import CardThumbnailFiles from '@/components/Common/cardThumbnailFiles';
export default {
  components: { ImgAndVideo, CardThumbnailFiles },
  props: {
    fileList: {
      type: Array,
      default: () => []
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    showCardMode: { // 显示卡片模式
      type: Boolean,
      default: false
    },
    filePercent: {
      type: Object,
      default: () => ({})
    },
    errorFileList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      maxHeight: ''
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    switchDialog() {
      this.dialogVisible = !this.dialogVisible;
      if (this.dialogVisible) {
        const clientHeight = window.innerHeight;
        this.maxHeight = `${((clientHeight * 3.5) / 5)}px`;
      }
    },
    removeFile(item, index) {
      this.$emit('removeFile', item, index);
    },
    reUpload(item, index) {
      this.$emit('reUpload', item, index);
    },
    removeError(item, index) {
      this.$emit('removeError', item, index);
    }
  }
};
</script>
<style lang="scss" scoped>
.file-show-dialog-container {
  // background-color: #fff;
  // display: inline-block;
  padding: 24px;
}
.icon {
  color: #999999;
  font-size:15px;
}
.file-list-title {
  color: #406eff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  &:hover {
    color: #0f34aa;
  }
}
.file-show-dialog {
  &::v-deep {
    .el-dialog {
      max-width: 90vw !important;
      width: auto !important;
      // min-width: 500px;
      // background-color: transparent !important;
      // border: none !important;
      // box-shadow: none !important;
      .el-dialog__body {
        padding: 0 !important;
      }
    }
    .el-dialog__body {
      padding: 0 !important;
    }
  }
}
.fitMobile {
  ::v-deep .el-dialog{
    width: 100% !important;
  }
}
.scroll {
  @include scrollBar($x: hidden, $y: auto, $width: 6px);
}
</style>
